<template>
  <!-- <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div> -->
  <div class="container">
    <div class="box">
      <!-- 5. 实现oppo商城首页排版 -->
      <div class="header"><input class="shuru" type="text" placeholder="OPPO A3"><button class="denglu">登录</button></div>
      <div class="main">
<img src="../assets/images/iphone_03.jpg" alt="">
      </div>
    </div>
    <div class="footer">
      <van-tabbar v-model="active">
  <van-tabbar-item icon="home-o">首页</van-tabbar-item>
  <van-tabbar-item icon="apps-o">分类</van-tabbar-item>
  <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
  <van-tabbar-item icon="friends-o">自己</van-tabbar-item>
 
</van-tabbar>
    </div>
  </div>
</template>
<script>

</script>
<style lang="scss">
*{
  padding: 0;
  margin: 0;
  list-style: none;
}
html,body,#app,.container{
  width: 100%;
  height: 100%;
}
.container{
  display: flex;
  flex-direction: column;
  // overflow: auto;
  .box{
    flex: 1;
      overflow: auto;
    .header{
      // 6. 手动封装js方法实现使用rem进行适配
      height: 3.125rem;
.shuru{
border-radius: 1.875rem;
width: 14.375rem;
height: 2.5rem;
}
.denglu{
  border: none;
}
    }
    .main{
      flex: 1;
      overflow: auto;
    }
  }
  footer{
    height: 4.75rem;
    background: skyblue;
  }
}
</style>
